<template>
    <div style="width: 100%;height: 100%;" v-loading="loading" element-loading-text="拼命加载中" 
        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <div style="width: 100%;height: 100%;">
            <div style="width: 100%;height: 9%;display: flex;align-items: center;">
                <div class="scrollable-div" ref="scrollableDiv" @wheel="scrollHorizontally">
                    <el-radio v-for="(item,index) in allForm" :key="index" v-model="radio1" :label="item.label" border>{{ returnTitle(index) }}</el-radio>
                </div>

                <div style="margin-left: auto;display: flex;gap:15px;">
                    <div style="display: flex; align-items: center; justify-content: center; width: 28px; "
                        class="btn_width">
                        <el-button style="width: 28px;height: 28px;" icon="el-icon-refresh-right"
                            @click="reNewDataAction"></el-button>
                    </div>
                    <div class="btn_second">
                        <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="新增一条管网至主控阀">
                            <el-button slot="reference" @click="add" icon="el-icon-plus">新增</el-button>
                        </el-popover>
                    </div>
                    <div class="btn_three">
                        <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="删除所有选中的管网至主控阀">
                            <el-button slot="reference" @click="remove" icon="el-icon-delete">删除</el-button>
                        </el-popover>
                    </div>

                </div>
            </div>
            <div
                style="height: 84.5%;position: relative; overflow: auto;padding: 10px;border: 1px solid rgb(221, 228, 239);">
                <div style="display: flex;  align-items: center; width: 100%;">
                    <div class="before"></div>
                    <div>主控阀</div>
                    <div class="smallTilte">
                        <div>注：开井盖前，将已经校准好的探测头通过井盖孔伸入检测，注意井内水位，防仪表吸入。</div>

                    </div>
                    <div style="display: flex;margin-left: auto;align-items: center;gap: 15px;width: 40%;">
                        <div >备注</div>
                        <el-input v-model="allForm[radio1].data.notes.content" placeholder="请输入" style="width: 90%;"></el-input>


                    </div>
                </div>


                <div class="titleStyle">
                    <div class="inputHorizon" v-for="item in allForm[radio1].data.mainControllValve" :key="item.id">
                        <div style="width: 112px;text-align: right;margin-right: 20px;">{{ item.name }}</div>
                        <div v-if="item.componentType == false" style="width: 56%;">
                            <el-select v-model="item.content" :placeholder="item.placeHolder" style="width: 100%;" clearable>
                                <el-option v-for="items in item.data" :key="items.id" :label="items.name" :value="items.id">
                                </el-option>
                            </el-select>
                        </div>

                        <el-input v-if="item.componentType == true" v-model="item.content" placeholder="请输入"
                            style="width: 56%;"></el-input>

                    </div>
                </div>


                <div style="display: flex;flex-wrap: wrap;">
                
                    <div v-for="(item, index) in allForm[radio1].data.mainControllValveImage" :key="index" class="horizonDIsplay">

                        <div>{{ item.title }}</div>

                        <div style="width: 27%;position: relative;margin-left: 30px;margin-right: 30px;">
                            <el-image v-show="mainControllImage.length > 0" style="width: 100%; height: 150px;"
                                :src="mainControllImage[0]" :preview-src-list="mainControllImage">
                                <div slot="error" class="image-slot">
                                    <img src="../../assets/images/stageIcon/加载失败.jpeg" alt=""
                                        style="width: 100%;height: 150px;">
                                </div>
                            </el-image>
                            <img v-show="mainControllImage.length == 0" src="../../assets/images/stageIcon/暂无图片.png" alt=""
                                style="width: 100%;height: 150px;">
                            <div class="overlay" v-show="mainControllImage.length > 0">范例图</div>
                        </div>
                        <image-lookthree :upAddress="item.upAddress" :imageData="item.imageData" :projectInfo="projectInfo"
                            :id="stageSurveyGasMcvList[radio1].id" :dictName="item.dictName"
                            :sampleImageAll="mainControllImage" :flieName="item.title"></image-lookthree>


                    </div>
                </div>



                <div style="display: flex;  align-items: center;margin-top: 30px;">
                    <div class="before"></div>
                    <div>井内外隐患描述</div>
                    <div style="display: flex;font-size: 14px;color: rgb(144, 147, 163);">
                    </div>
                </div>

                <div style="display: flex;flex-wrap: wrap;">
                    <div v-for="item in allForm[radio1].data.inWellDecription" :key="item.id" class="textAreaStyleDiv">
                        <div>{{ item.title }}</div>
                        <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="item.content"
                            style="width: 620px;margin-left: 20px;" resize="none">
                        </el-input>
                    </div>
                </div>

            </div>
            <el-button class="buttonStyle" @click="submit">保存</el-button>
        </div>
    </div>
</template>
<script>
import { getFileListApi } from "@/api/project/file";
import { updateSurveyApi, getSurveyApi } from "@/api/project/survey";
import { energyMainValve, addEnergyMainValve, removeEnergyMainValve } from "@/api/project/stageApi";
import { getInfo } from "@/api/project/info";
import imageLookthree from "../OtherOwerUseComponent/imageLookthree.vue";
export default {
    created() {
        // this.add()
        const projectId = this.$route.params && this.$route.params.projectId;
        this.getInfo(projectId);
    },
    props: ['jsonData', 'imageData'],
    watch: {


        imageData: {
            handler(newData, oldData) {

                for (var i = 0; i < newData.length; i++) {

                }

            },

        },
    },
    data() {
        return {

            //主控阀范例
            loading: false,
            projectInfo: {},
            checked: "",
            input: '',
            //获取的数据
            stageSurveyGasMcvList: [],
            ///全部内容做成一个数组
            allForm: [

            ],
            ///单选框的使用变量
            radio1: 0,
            titleExpress: "注：开井盖前，将已经校准好的探测头通过井盖孔伸入检测，注意井内水位，防仪表吸入。",


            mainControllImage: [],
        }
    },
    name: "energyMainControllValue",
    methods: {
        returnTitle(index){
            
            if (this.allForm[index].data.notes.content!=null){
                return this. allForm[index].data.notes.content
            }
            return '燃气主控阀'+(index+1) 
        },
        reNewDataAction() {

             this.getImage('勘察范例/燃气主控阀/主控阀/主控阀')
            this.getNet()
        },
        getInfo(projectId) {
            getInfo(projectId).then(response => {
                this.projectInfo = response.data;
                 
                this.getNet()
            })
        },
        getNet() {
            this.loading = true
            energyMainValve(this.projectInfo.projectId).then(response => {
                this.loading = false
                if (response.code == 200) {
                    this.stageSurveyGasMcvList = response.data
                    this.distrbute()

                }
            })
        },
        reNew() {

            energyMainValve(this.projectInfo.projectId).then(response => {
                if (response.code == 200) {
                    this.stageSurveyGasMcvList = response.data
                    this.distrbute()

                }
            })
        },
        distrbute() {

            this.allForm = []
            for (let i = 0; i < this.stageSurveyGasMcvList.length; i++) {
                let mainControllValve = [
                    ///componentType=false显示下拉菜单，为true显示输入框
                    {
                        name: '区域位置', id: 1, componentType: false, content: null, placeHolder:'园区外/园区内',dictName: 'regionalLocation', data: [
                            { name: '园区外', id: 1 },
                            { name: '园区内', id: 2 },
                        ]
                    },
                    {
                        name: '具体位置', id: 2, componentType: false, content: null, placeHolder:'公路/人行道/绿化带',dictName: 'specificLocation', data: [
                            { name: '公路', id: 1 },
                            { name: '人行道', id: 2 },
                            { name: '绿化带', id: 3 },
                        ]
                    },
                    {
                        name: '阀井周围', id: 3, componentType: false, content: null, placeHolder:'占压/难运维/绿化带',dictName: 'valveWellPosition', data: [
                            { name: '占压', id: 1 },
                            { name: '难运维', id: 2 },
                            { name: '绿化带', id: 3 },
                        ]
                    },
                    {
                        name: '井盖材料', id: 4, componentType: false, content: null, placeHolder:'纤维/铸铁/水泥',dictName: 'manholeCoverMaterial', data: [
                            { name: '纤维', id: 1 },
                            { name: '铸铁', id: 2 },
                            { name: '水泥', id: 3 },
                        ]
                    },
                    {
                        name: '阀井类型', id: 5, componentType: false, content: null, placeHolder:'直埋井/方井',dictName: 'valveWellType', data: [
                            { name: '直埋井', id: 1 },
                            { name: '方井', id: 2 },
                        ]
                    },
                    { name: '井内甲烷浓度', id: 6, componentType: true, content: null, placeholder: "请输入", dictName: 'methaneConcentration', },
                    { name: '井内一氧化碳浓度', id: 7, componentType: true, content: null, placeholder: "请输入", dictName: 'carbonMonoxideConcentration', },
                    { name: '井内硫化氢浓度', id: 8, componentType: true, content: null, placeholder: "请输入", dictName: 'hydrogenSulfideConcentration', },
                    { name: '井深', id: 9, componentType: true, content: null, placeholder: "请输入(数量)", dictName: 'wellDepth', },
                    {
                        name: '阀门类型', id: 10, componentType: false, content: null, placeHolder:'球阀/PE阀/闸阀',dictName: 'valveType', data: [
                            { name: '球阀', id: 1 },
                            { name: 'PE阀', id: 2 },
                            { name: '闸阀', id: 3 },
                        ]
                    },
                    {
                        name: '阀门启闭', id: 11, componentType: false, content: null, placeHolder:'正常/隐患',dictName: 'valveOpeningClosing', data: [
                            { name: '正常', id: 1 },
                            { name: '隐患', id: 2 },
                        ]
                    },
                    { name: '扭力', id: 12, componentType: true, placeholder: "请输入", content: null, dictName: 'torqueForce', },
                ]
                for (let n = 0; n < mainControllValve.length; n++) {
                    if (mainControllValve[n].componentType == true) {
                        mainControllValve[n].content = this.stageSurveyGasMcvList[i][mainControllValve[n].dictName]
                    }
                    else {
                        let value = this.stageSurveyGasMcvList[i][mainControllValve[n].dictName]
                        if (value != null && value != '') {
                            mainControllValve[n].content = parseInt(this.stageSurveyGasMcvList[i][mainControllValve[n].dictName])
                        } else {

                        }
                        //  mainControllValve[n].content = parseInt(newData.stageSurveyInfo[this.siteEnergyInformation[i].dictName])
                    }
                    ///描述
                }
                let inWellDecription = [
                    { id: 1, title: "井内隐患描述", content: null, placeholder: "请输入", dictName: 'inwellingHiddenDangerDescribe', },
                    { id: 2, title: "井外隐患描述", content: null, placeholder: "请输入", dictName: 'outsideWellHiddenDangerDescribe', },
                ]
                for (let n = 0; n < inWellDecription.length; n++) {
                    inWellDecription[n].content = this.stageSurveyGasMcvList[i][inWellDecription[n].dictName]
                }
                let mainControllValveImage = [
                    { id: 1, title: "主控阀", content: null, placeholder: "请输入", dictName: 'mainControlValve', upAddress: '燃气主控阀/主控阀/主控阀', name: '燃气主控阀/主控阀', imageData: {} },
                ]

                let notes =
                    { dictName: 'notes', placeholder: '请输入', isNumTypeInput: false, content: null }
                notes.content = this.stageSurveyGasMcvList[i].notes

                var dict = { data: {}, label: this.allForm.length }
                dict.data['mainControllValve'] = mainControllValve
                dict.data['inWellDecription'] = inWellDecription
                dict.data['mainControllValveImage'] = mainControllValveImage
                dict.data['notes'] = notes
                this.allForm.push(dict)


                this.getImage('勘察范例/燃气主控阀/主控阀/主控阀')
            }
        },
        ///刷新操作
        renew() {

            this.allForm[0].data['mainControllValve'][5].content = '我是切图仔'

        },
        ///删除表单行动
        remove() {


            ///删除操作
            if (this.allForm.length > 1) {

            let id = this.stageSurveyGasMcvList[this.radio1].id
            removeEnergyMainValve(id).then(response => {
                if (response.code == 200) {
                    if (this.radio1 == this.allForm.length - 1) {
                        this.radio1 = this.radio1 - 1
                    }
                    this.reNew()
                }
            })

        }

        },
        ///添加新的表单
        add() {

            let stageSurvey = { projectId: this.projectInfo.projectId }

            addEnergyMainValve(stageSurvey).then(response => {
                if (response.code == 200) {
                    this.reNew()
                }
            })


        },
        scrollHorizontally(event) {
            event.preventDefault();
            const scrollAmount = event.deltaY;
            this.$refs.scrollableDiv.scrollLeft += scrollAmount;
        },
        open() {
            this.$alert('提交燃气主控阀成功', '提交成功', {
                confirmButtonText: '确定',

            });
        },
        submit() {
            this.loading = true
            //修改已有的
            let all = { stageSurveyGasMcvList: [] }
            for (let i = 0; i < this.stageSurveyGasMcvList.length; i++) {


                var stageSurvey = { projectId: this.projectInfo.projectId, id: this.stageSurveyGasMcvList[i].id }




                //主控阀
                for (let n = 0; n < this.allForm[i].data['mainControllValve'].length; n++) {

                    if (this.allForm[i].data['mainControllValve'][n].dictName != '') {
                        stageSurvey[this.allForm[i].data['mainControllValve'][n].dictName] = this.allForm[i].data['mainControllValve'][n].content
                    }
                }
                //描述
                for (let n = 0; n < this.allForm[i].data['inWellDecription'].length; n++) {

                    if (this.allForm[i].data['inWellDecription'][n].dictName != '') {
                        stageSurvey[this.allForm[i].data['inWellDecription'][n].dictName] = this.allForm[i].data['inWellDecription'][n].content
                    }
                }
                if (this.allForm[i].data['notes'].dictName != '') {
                    stageSurvey[this.allForm[i].data['notes'].dictName] = this.allForm[i].data['notes'].content
                }


                all.stageSurveyGasMcvList.push(stageSurvey)
            }

            updateSurveyApi(all).then(response => {
                this.loading = false
                if (response.code == 200) {
                    this.open()
                }
            })

            //提交新增的
            // let num=this.allForm.length-stageSurveyGasMcvList
            for (let i = this.stageSurveyGasMcvList.length; i < this.allForm.length; i++) {
                var stageSurvey = { projectId: this.projectInfo.projectId }

                //主控阀
                for (let n = 0; n < this.allForm[i].data['mainControllValve'].length; n++) {

                    if (this.allForm[i].data['mainControllValve'][n].dictName != '') {
                        stageSurvey[this.allForm[i].data['mainControllValve'][n].dictName] = this.allForm[i].data['mainControllValve'][n].content
                    }

                }
                //描述
                for (let n = 0; n < this.allForm[i].data['inWellDecription'].length; n++) {

                    if (this.allForm[i].data['inWellDecription'][n].dictName != '') {
                        stageSurvey[this.allForm[i].data['inWellDecription'][n].dictName] = this.allForm[i].data['inWellDecription'][n].content
                    }

                }



                addEnergyMainValve(stageSurvey).then(response => {
                    if (response.code == 200) {


                    }
                })
            }

        },


        getImage(path) {
            this.mainControllImage = []
            getFileListApi(path).then(response => {

                if (response.code == 200) {
                    if (response.data.length != 0) {
                        Array.from(response.data).forEach(item => {
                            this.mainControllImage.push(this.$myGlobalVariable + item);

                        });

                    }

                }
         
            })
        }
    },
    mounted() {
        
    },
    components: {
        imageLookthree
    }
}
</script>
<style>
.menExtends {}

.inputDescription {
    width: 620px;
    height: 146px;
    border: 1px solid #DCDFE6;
}

.textAreaStyleDiv {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 25px;
}
</style>